<script setup>
import { useRouter, useRoute } from "vue-router";
import commonHeader from "@/components/commonHeader.vue";
import commonFooter from "@/components/commonFooter.vue";
import mainContainer from "@/components/mainContainer.vue";
import { onMounted } from "vue";

const router = useRouter();
const route = useRoute();
function toLogin() {
  router.push("/main/login");
}
function toDemo() {
  router.push("/main/childDemo");
}
onMounted(() => {
  const loading = document.querySelector("#appLoading");
  loading.style.display = "none";
  console.log(loading, "基座应用loading");
});
</script>

<template>
  <el-config-provider namespace="ep">
    <common-header v-if="route.name !== 'login'" />
    <main-container />
    <div class="return-top">返回顶部</div>
    <common-footer v-if="route.name !== 'login'" />
  </el-config-provider>
</template>

<style scoped lang="scss">
.return-top {
  background-color: #3a02ef;
  color: #f5f2f2;
  border-radius: 5px;
  position: fixed;
  bottom: 100px;
  right: 50px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  box-shadow: 3px 1px 16px 0px #0000001f;
  padding: 10px;
  text-align: center;
  line-height: 20px;
}
.common-header {
  .el-button {
    border: none;
    background-color: red;
  }
}
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
